<template>
   <div  ref="chart_map" :style="{paddingTop:'130px',background:'#1e2266',backgroundImage: 'url('+ bigbg +')',backgroundSize:'100% 100%',height:'100%'}">
    </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js';
import bigbg from '@/assets/大.png'
export default {
  name: "chinaMap",
  props: {
    moveLines: Array,
    citys:Array,
  },
  data () {
    return {
      dom: null,
      bigbg:bigbg
    }
  },

  methods: {
    resize () {
      this.dom.resize()
    },
    drawPie(){
       
   let this_ = this;
    this_.myChart = echarts.init(this.$refs.chart_map);
    let option = {
      title: {
        text: "",
        left: "center",
        textStyle: {
          color: "#fff"
        }
      },
      legend: {
        show: false,
        orient: "vertical",
        top: "bottom",
        left: "right",
        data: ["地点", "线路"],
        textStyle: {
          color: "#fff"
        }
      },
      geo: {
        map: "china",
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: "rgba(7,21,57,0.5)",
            borderColor: "#0177ff"
          },
          emphasis: {
            areaColor: "#071537" //鼠标指上市时的颜色
          }
        }
      },
      series: [
        {
          name: "地点",
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke"
          },
          label: {
            emphasis: {
              show: true,
              position: "right",
              color: "#ffffff",
              fontSize:14,
              formatter: "{b}"
            }
          },
          symbolSize: 2,
          showEffectOn: "render",
          itemStyle: {
            normal: {
              color: "#46bee9"
            }
          },
          data: this.citys
        },
        {
          name: "线路",
          type: "lines",
          coordinateSystem: "geo",
          zlevel: 2,
          large: true,
          effect: {
            show: true,
            constantSpeed: 30,
            symbol: "pin",
            symbolSize: 3,
            trailLength: 0
          },
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#91e888"
                  },
                  {
                    offset: 1,
                    color: "#91e888"
                  }
                ],
                false
              ),
              width: 1,
              opacity: 0.5,
              curveness: 0.1
            }
          },
          data: this.moveLines
        }
      ]
    };

    this_.myChart.setOption(option);
    window.addEventListener("resize", this_.charResize, true);
  }
  },
  mounted () {
     this.drawPie()
  },
  watch: {
      moveLines: {
        handler(newValue) {
          this.moveLines = newValue;  //把新值赋值给属性
          this.drawPie();  //刷新echarts图表
        },
        deep: true
      },
      citys: {
        handler(newValue) {
          this.citys = newValue;  //把新值赋值给属性
          this.drawPie();  //刷新echarts图表
        },
        deep: true
      }
  },
  beforeDestroy () {
    // off(window, 'resize', this.resize)
  }
}

</script>
